<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>第九师水资源监管系统</title>
    <!--    引入各类样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link href="css/video-js.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>

<!-- 黄瑶 -->


<body>
<div class="main">
    <div class="nav">第九师水资源监管系统</div>
    <div class="nav_btn">
        <div class="btn_left">
            <a href="">
                <div class="btn_list listActive">主页</div>
            </a>
            <a href="">
                <div class="btn_list">XX流转</div>
            </a>
            <a href="">
                <div class="btn_list">空天地</div>
            </a>
            <a href="">
                <div class="btn_list">生长监测</div>
            </a>
        </div>
        <div class="btn_right">
            <a href="">
                <div class="btn_list">生产加工</div>
            </a>
            <a href="">
                <div class="btn_list">仓储管理</div>
            </a>
            <a href="">
                <div class="btn_list">流通销售</div>
            </a>
            <a href="">
                <div class="btn_list">数据中心</div>
            </a>
        </div>
    </div>
    <div class="content">
        <div class="centerBox">
            <div class="baseBox centerMainBox1" style="height:70%">
                <div class="baseBoxLeft left">
                    <div class="boxTitle">气象数据监测</div>
                    <img src="img/left.png" alt="">
                    <table class="equipment_table env_table">
                        <tr>
                            <td>指标</td>
                            <td>标准值</td>
                            <td>当前值</td>
                            <td>预警</td>
                        </tr>
                        <tr>
                            <td>温度</td>
                            <td>18～20℃</td>
                            <td>9℃</td>
                            <td>正常</td>
                        </tr>
                        <tr>
                            <td>湿度</td>
                            <td>40%～60%</td>
                            <td>52%</td>
                            <td>正常</td>
                        </tr>
                        <tr>
                            <td>风速</td>
                            <td>0m/s~4m/s</td>
                            <td>2m/s</td>
                            <td>正常</td>
                        </tr>
                        <tr>
                            <td>降水</td>
                            <td>2mm~4mm</td>
                            <td>0mm</td>
                            <td style="color:red">偏低</td>
                        </tr>
                    </table>
                    <div style="width:95%;height:50%;margin-left:2.5%" id="wind"></div>
                </div>
                <div class="baseBoxRight right">
                    <ul class="plant">
                        <li>
                            <a class="jumps" href="">
                                <div>
                                    <span>茶园种植面积(亩)</span>
                                    <img src="img/qqzmj.png" alt="">
                                </div>
                                <p class="">350000</p>
                                <span class="spans3"></span>
                            </a>
                        </li>
                        <li>
                            <a class="jumps" href="">
                                <div>
                                    <span>产值(亿元)</span>
                                    <img src="img/ccc2.png" alt="">
                                </div>
                                <p class="">180</p>
                                <span class="spans2" style="background: #499BFF;"></span>
                            </a>
                        </li>
                        <li>
                            <a class="jumps" href="">
                                <div>
                                    <span>产量(吨)</span>
                                    <img src="img/ccc.png" alt="">
                                </div>
                                <p class="">82000</p>
                                <span class="spans3" style="background: #F2CE43;"></span>
                            </a>
                        </li>
                        <li>
                            <a class="jumps" href="">
                                <div class="clear plantTop ">
                                    <span class="flexLeft">茶园(个)</span>
                                    <img class="flexright" src="img/cy.png" alt="">
                                </div>

                                <p class=" plantNum1">3207</p>
                                <span class="spans0"></span>
                            </a>
                        </li>
                        <li>
                            <a class="jumps" href="">
                                <div class="clear plantTop ">
                                    <span class="flexLeft">茶企(个)</span>
                                    <img class="flexright" src="img/cq.png" alt="">
                                </div>
                                <p class=" plantNum1">157</p>
                                <span class="spans1"></span>
                            </a>
                        </li>
                        <li>
                            <a class="jumps" href="">
                                <div>
                                    <span>茶农(人)</span>
                                    <img src="img/cn.png" alt="">
                                </div>
                                <p class="">360000</p>
                                <span class="spans2"></span>
                            </a>
                        </li>

                    </ul>
                    <!-- 地图 -->
                    <div class="map">
                        <img class="mapImg" src="img/map1.png">
                        <div class="mapContent1">
                            <div class="mapContentFont">田庄乡</div>
                            <div class="mapContentFont">
                                茶园:<span>101</span>
                            </div>
                            <div class="mapContentFont">
                                茶企:<span>10</span>
                            </div>
                            <div class="mapContentFont">
                                茶农:<span>18371</span>
                            </div>
                        </div>
                        <a class="mapActived1" href=""></a>
                        <!-- <div class="mapContent2">
                            <div class="mapContentFont">田庄乡</div>
                            <div class="mapContentFont">
                                茶园:<span>126</span>
                            </div>
                            <div class="mapContentFont">
                                茶企:<span>566</span>
                            </div>
                            <div class="mapContentFont">
                                茶农:<span>999</span>
                            </div>
                        </div> -->
                        <a class="mapActived2" href=""></a>
                        <!-- <div class="mapContent3">
                            <div class="mapContentFont">田庄乡</div>
                            <div class="mapContentFont">
                                茶园:<span>126</span>
                            </div>
                            <div class="mapContentFont">
                                茶企:<span>566</span>
                            </div>
                            <div class="mapContentFont">
                                茶农:<span>999</span>
                            </div>
                        </div> -->
                        <a class="mapActived3" href=""></a>
                    </div>
                </div>
            </div>

            <div class="baseBox centerMainBox2" style="height:30%;">
                <img src="img/down.png" alt="">
                <div class="boxTitle2" style="width:26%">统计数据</div>
                <div class="csbaseBox1">
                    <ul class="baseDatas">
                        <li class="left ">
                            <a href="">
                                <div class="borderRight "></div>
                                <span>茶园统计</span>
                            </a>
                        </li>
                        <li class="left">
                            <a href="">
                                <div class="borderRight "></div>
                                <span>茶企统计</span>
                            </a>
                        </li>
                        <li class="left">
                            <a href="">
                                <div class="borderRight "></div>
                                <span>茶农统计</span>
                            </a>
                        </li>
                    </ul>

                    <table class="tableDetalis">
                        <tr>
                            <td>名称</td>
                            <td>类型</td>
                            <td>面积</td>
                            <td>名称</td>
                            <td>类型</td>
                            <td>面积</td>
                            <td>姓名&nbsp&nbsp</td>
                            <td>品种</td>
                            <td>面积</td>
                        </tr>
                        <tr>
                            <td>青云观茶园</td>
                            <td>企业</td>
                            <td>1800亩</td>
                            <td>如需商用，请联系qq:863512936</td>
                            <td>私营</td>
                            <td>3283亩</td>
                            <td>刘新武</td>
                            <td>云台大叶</td>
                            <td>10亩</td>
                        </tr>
                        <tr>
                            <td>彩云谷茶园 </td>
                            <td>企业</td>
                            <td>380亩</td>
                            <td>如需商用，请联系qq:863512936</td>
                            <td>私营</td>
                            <td>6200亩</td>
                            <td>张方</td>
                            <td>碧香早</td>
                            <td>15亩</td>
                        </tr>
                        <tr>
                            <td>赵家坪茶园</td>
                            <td>合作社</td>
                            <td>510亩</td>
                            <td>如需商用，请联系qq:863512936</td>
                            <td>私营</td>
                            <td>5800亩</td>
                            <td>李小维</td>
                            <td>槠叶齐</td>
                            <td>12亩</td>
                        </tr>
                        <tr>
                            <td>马路口茶园</td>
                            <td>个人</td>
                            <td>17亩</td>
                            <td>如需商用，请联系qq:863512936</td>
                            <td>私营</td>
                            <td>30000亩</td>
                            <td>王骁骁</td>
                            <td>黄金茶</td>
                            <td>11亩</td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <div class="leftBox right" style="width:22%">
            <div class="baseBox baseBox1" style="margin-bottom:15px;height:40%">
                <img src="img/right.png" alt="">
                <div class="csbaseBox1">
                    <div class="boxTitle">视频监控设备</div>
                    <ul class="boxLis">
                        <li class="left active">茶园监控</li>
                        <li class="left">生产车间监控</li>
                        <li class="left">仓储监控</li>
                    </ul>
                    <div class="content1">
                        <ul>
                            <li style="display: block;" class="contList">
                                <!-- 四个角描边 stat -->
                                <div class="leftTopLine1"></div>
                                <div class="leftTopLine2"></div>
                                <div class="rightTopLine1"></div>
                                <div class="rightTopLine2"></div>
                                <div class="leftBottomLine1"></div>
                                <div class="leftBottomLine2"></div>
                                <div class="rightBottomLine1"></div>
                                <div class="rightBottomLine2"></div>

                                <div class="boxVideo">
                                    <video class="video-js vjs-big-play-centered" data-setup='{}' controls>
                                        <source src="http://hls01open.ys7.com/openlive/ea2001c1aec344d1ac45d8b0bbc74e87.m3u8" type="application/x-mpegURL">
                                    </video>
                                </div>
                            </li>
                            <li class="contList">
                                <!-- 四个角描边 stat -->
                                <div class="leftTopLine1"></div>
                                <div class="leftTopLine2"></div>
                                <div class="rightTopLine1"></div>
                                <div class="rightTopLine2"></div>
                                <div class="leftBottomLine1"></div>
                                <div class="leftBottomLine2"></div>
                                <div class="rightBottomLine1"></div>
                                <div class="rightBottomLine2"></div>

                                <div class="boxVideo">
                                    <video class="video-js vjs-big-play-centered" data-setup='{}' controls>
                                        <source src="http://hls01open.ys7.com/openlive/cf40f99cc9cb4a23bd52e0b2119b534c.m3u8" type="application/x-mpegURL">
                                    </video>
                                </div>
                            </li>
                            <li class="contList">
                                <!-- 四个角描边 stat -->
                                <div class="leftTopLine1"></div>
                                <div class="leftTopLine2"></div>
                                <div class="rightTopLine1"></div>
                                <div class="rightTopLine2"></div>
                                <div class="leftBottomLine1"></div>
                                <div class="leftBottomLine2"></div>
                                <div class="rightBottomLine1"></div>
                                <div class="rightBottomLine2"></div>

                            </li>
                        </ul>
                    </div>
                    <div class="liSpan">介绍</div>
                    <p class="liP">茶园环境远程监控物联网系统能够支持以网站,浏览器,视频等客户端访问方式提供远程监测与控制管理</p>
                </div>
            </div>
            <div class="baseBox baseBox2" style="margin-bottom:15px;height:29.5%">
                <img src="img/right2.png" alt="">
                <!-- 四个角描边 end -->
                <div class="boxTitle2">种植品种分析</div>
                <div class="boxRader" id="Progress"></div>
            </div>
            <div class="baseBox baseBox3" style="height:28.9%">
                <img src="img/right3.png" alt="">
                <!-- 四个角描边 end -->
                <div class="boxTitle2">茶叶销量分析</div>
                <div class="boxRader" id="mains"></div>
            </div>

        </div>
    </div>
</div>


<!--引入各类函数-->
<script src="js/video.js"></script>
<script src="js/videojs-contrib-hls.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/dataScoll.js"></script>
<script src="js/index.js"></script>


</body>

</html>

